import ajax from '../../utils/ajax'

import pop from '../common/pop/pop'
import upload from '../../utils/upload'


const form_srarch = document.forms['search']



// 载入pop后再载入pop内容，调用pop的load方法写入pop
import popHTML from './pop.tmp'
pop.load(popHTML)

const a = pop.load(popHTML)
const form = a.children[0]

const add_btn = form['btn']

let search = '', pagesize = 10, pageindex = 1;

form.onsubmit = async function (e) {
    e.preventDefault()

    // 当点击sumit按钮时候，判断隐藏域是否为空，如果为空新增，不为空新增
    let result
    if (form.id.value != '') {
        result = await ajax('post', '/api/manage/admins/modifyadmin', {
            username: form.username.value,
            password: form.password.value,
            id: form.id.value
        })
    } else {
        const fd = new FormData(dialogForm);
        result = await upload('/api/manage/admins/reg', fd)
    }

    if (result.flag) {

        alert(form.btn.innerHTML + '成功');
        pop.hide();
        render();
    } else {
        alert(result.msg)
    }
}

// 点击修改按钮时候，向后台发送数据，将隐藏域的name设置值
async function modifyadmin(id) {
    const result = await ajax('get', '/api/manage/admins/getadmin', { id });
    if (result.flag) {
        form.username.value = result.data.username;
        form.password.value = result.data.password;
        form.id.value = id
        add_btn.innerHTML = 'the button can change you info when you click it';
        pop.show()
    }
}





export default init
init()

function init() {
    // 获取管理员列表数据，并渲染到页面 
    render()

    // 新增按钮事件
    document.getElementById('admin_manage_add_btn').onclick = show_add_window;
}

function show_add_window() {
    // 新增时候清除隐藏域的值
    form.id.value = ''
    pop.show()
    form.btn.innerHTML = '新增'
}



async function render() {
    const result = await ajax('get', '/api/manage/admins/getlist', {
        search, pagesize, pageindex
    })

    const tbody = document.getElementById('tbody')
    tbody.innerHTML = ''
    // 事件点击的触发事件（事件委托）
    tbody.onclick = admin_manage_tbody_click;

    result.data.forEach(item => {
        const tr = document.createElement('tr')
        const td1 = document.createElement('td')
        td1.innerHTML = item.id
        const td2 = document.createElement('td')
        td2.innerHTML = item.username
        const td3 = document.createElement('td')
        td3.innerHTML = item.updateTime
        const td4 = document.createElement('td')
        td4.innerHTML = item.createTime

        const td5 = document.createElement('button')
        td5.innerText = '修改'
        td5.dataset.id = item.id
        td5.dataset.type = 'modify'

        const td6 = document.createElement('button')
        td6.innerText = '删除'
        td6.dataset.id = item.id
        td6.dataset.type = 'del'

        tr.appendChild(td1)
        tr.appendChild(td2)
        tr.appendChild(td3)
        tr.appendChild(td4)
        tr.appendChild(td5)
        tr.appendChild(td6)
        tbody.appendChild(tr)
    })


}

/*
实现删除管理员得功能
事件委托进行删除
判断点击的是删除还是修改
 */

function admin_manage_tbody_click(e) {
    if (e.target.dataset.type == 'modify') {
        modifyadmin(e.target.dataset.id);
    }
    if (e.target.dataset.type == 'del') {
        delAdmin(e.target.dataset.id)
    }
}

// 删除函数
function delAdmin(id) {
    if (confirm('真的删除吗？')) {

        ajax('delete', '/api/manage/admins/deladmin', { id }).then(result => {
            if (result.flag) {
                alert('success')
                console.log(add_btn);
                console.log(document.getElementById('admin_manage_search_btn'))
                render()
            } else {
                alert('删除失败')
            }
        })
    }

}


// 查找函数
form_srarch.onsubmit = function (e) {
    e.preventDefault()
    search = form_srarch.uid.value
    console.log(123, search)
    render()
}
// 重置
form_srarch.onreset = function (e) {

    search = ''
    render()
}









